<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <style>
        body{
            margin: 0px;
            width: 375px;
            height: 61px;
        }
        #img1{
            width: 375px;
            height: 61px;
        }
        #return{
            width: 21px;
            height: 40px;
        }
        #mine{
            position: absolute;
            top: -6px;
            left: 140px;
            color: white;
            font-family: 方正粗黑宋简体;
        }
        #zhiti{
            position: absolute;
            top: 117px;
            left: 145px;
            font-size: 25px;
            color: white;
            letter-spacing: 25px;
        }
        .news ul {
            padding: 0;
            line-height:3px
        }
        .news li {
            position: relative;
            overflow: hidden;
            padding: 5px;
            border-bottom: 1px solid lightgray;
        }
        .news li span {
            display: none;
        }
        .news li:hover span {
            display: inline;
            position: absolute;
            top: 0;
            right: 2px;
            padding: 0 5px;
            border-radius: 10px;
            font-size: 12px;
            background: #ececec;
        }
        .news .news_content {
            /*width: 60%;*/
            height: 85%;
            margin: 2.5%;
            float: left;
        }
        .news .news_content p {
            line-height: 27px;
            margin-top: 10px;
        }
        #footer{
            margin: 12px;
        }

        #logout{
            background-color: #7e86ec;
            color: white;
            position: absolute;
            top: 610px;
            left: 90px;
            width: 200px;
            height: 30px;
        }

    </style>
</head>
<body>
<div style="position:relative;height: 61px">
    <img id="img1" src="./img/nearby/img1.png">
    <div style="position:absolute; left:10px; top:8px;">
        <img id="return" src="./img/nearby/return.png" >
    </div>
    <div id="mine">
        <h2>个人信息</h2>
    </div>
</div>
<div>
    <img src="./img/img1.png" style="width:375px;height: 195px;">
    <div style="position:absolute; left:-50px; top:-80px;">
        <img  src="./img/login/img2.png" style="width: 256px;height: 500px" onclick="history.go(-1)">
    </div>
    <div id="zhiti">
        <p>健康饮水</p>
    </div>
    <div id="content">
<!--        <div id="imgs">-->
<!--            <img src="./img/information/user4.png">-->
<!--            <img src="./img/information/user5.png">-->
<!--        </div>-->
        <div class="news">
            <ul id="news">
            </ul>
        </div>
    </div>
    <div id="footer" >
        <p>打水记录</p>
        <p>支付方式绑定</p>

        <button onclick="logout()" id="logout" name="submit" type="button" value="">退出登录</button>

    </div>
</div>
<script src="./api/app.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    function loadData(type) {
        $.ajax({
            url:url+'api/information.php',
            type:'GET',
            data:{
                type:type
            },
            dataType:'json',
            success:function (res) {

                console.log(res)
                if(res.code==200){
                    var data=res.data
                    var ls = document.getElementById('news')
                    var contents = '';
                    for (var j = 0; j < 1; j ++) {
                        contents +=
                            '           <li >\n' +
                            '                <div class="news_content">\n' +
                            ' <img src="./img/information/user1.png"  ><p >' + data[j].card_id + '</p>\n' +
                            ' <img src="./img/information/user2.png" ><p >' + data[j].information+ '</p>\n' +
                            ' <img src="./img/information/user3.png" ><p >' + data[j].school+ '</p>\n' +
                            '                </div>\n'
                            '            </li>\n'
                    }
                    ls.innerHTML = contents;

                }
            },
            error:function (res) {

                console.log(res)

            }
        })




    }
    function logout() {
        var bo = window.confirm('退出登录？')
        if (bo) {
            localStorage.removeItem('username')
            location.href = './login.html'
        }
    }
    window.onload = function () {
        loadData(-1);
       // logout()// init();
    }
</script>
</body>
</html>